<template>
    <div class="layerRtb layerRtb-threecolumn">
        <three-title :title="{name:'积分处理'}"></three-title>
        <div class="layerRtb-scroll thinScroll" v-scrollHeight="437">

               <div :class=" {'analyItem':true, 'anItemBor':true,'issue-div': (IntegralHandle===undefined || IntegralHandle ===null  || IntegralHandle === ''  || IntegralHandle.cur_stage ===0)}">
                <p class="analyItemTit tx-center analyLightGreen">正常</p>
                <div class="analyItemCon">
                    <p class="col-md-4">时间：
                        <span class="cLightGray pr8"> 2019-01-01</span>
                    </p>
                    <p class="col-md-4">状态：
                        <span class="cLightGray pr8">正常</span>
                    </p>
                        <p class="col-md-12">
                        <span class="cLightGray pr8 cRed"> 提示：消分培训累计1次级别将降一级。</span>
                    </p>
                </div>
            </div>
<!--             <div class="analyItem">
                <p class="analyItemTit tx-center">培训时间</p>
                <div class="analyItemCon">
                    <p class="col-md-6">时间：
                        <span class="cLightGray pr8"></span>
                    </p>
                    <p class="col-md-6">积分：
                        <span class="cLightGray pr8"></span>
                    </p>
                    <p class="col-md-12">
                        <span class="cLightGray pr8"></span></p>
                </div>
            </div> -->
               <div :class=" {'analyItem':true, 'anItemBor':true,'issue-div': IntegralHandle.cur_stage ===1}">
                <p class="analyItemTit tx-center analyOrange">异常</p>
                <div class="analyItemCon">
                    <p class="col-md-4">时间：
                        <span class="cLightGray pr8"> 2019-01-01</span>
                    </p>
                    <p class="col-md-4">状态：
                        <span class="cLightGray pr8">待培</span>
                    </p>
                     <p class="col-md-10">
                        <span class="cLightGray pr8 cRed">  提示；消分培训累计2次降级两次，4级人员将封停</span>
                    </p>
                    <div class="fr train-div" @click="clickFourShow(1)">
                        <input type="button" value="培训" placeholder="培训" class="uiBtn-gray uiBtn-normal">
                    </div>
                </div>
            </div>
               <div :class=" {'analyItem':true, 'anItemBor':true,'issue-div': IntegralHandle.cur_stage ===2}">
                    <p class="analyItemTit tx-center analyRed">问题</p>
                     <div class="analyItemCon">
                    <p class="col-md-4">时间：
                        <span class="cLightGray pr8"> 2019-01-01</span>
                    </p>
                    <p class="col-md-4">状态：
                        <span class="cLightGray pr8">待培</span>
                    </p>
                         <p class="col-md-10">
                        <span class="cLightGray pr8 cRed">  提示；再次消分将进入待离状态</span>
                    </p>
                        <div class="fr train-div" @click="clickFourShow(2)">
                        <input type="button" value="培训" placeholder="培训" class="uiBtn-blue uiBtn-normal">
                    </div>
                </div>
            </div>
               <div :class=" {'analyItem':true, 'anItemBor':true,'issue-div': IntegralHandle.cur_stage ===3}">
                    <p class="analyItemTit tx-center analyGray">整改</p>
                      <div class="analyItemCon">
                    <p class="col-md-4">时间：
                        <span class="cLightGray pr8"> 2019-01-01</span>
                    </p>
                    <p class="col-md-4">状态：
                        <span class="cLightGray pr8">待离</span>
                    </p>
                     <div class="fr train-div" @click="clickFourShow(6)">
                        <input type="button" value="离职" placeholder="离职" class="uiBtn-red uiBtn-normal">
                        </div>
                </div>
            </div>


        </div>

        <div class="layerRtb-footer">
            <div class="analyItem">
                    <p class="analyItemTit tx-center">通知</p>
                    <div class="analyItemCon">
                            <p class="col-md-12" v-if="IntegralHandle.cur_stage ===0">
                                <span>xx经理您好！您当前积分为100分，但完成业绩目标升级后有望晋升，工作加油哦。</span>
                                <span></span>
                            </p>
                            <p class="col-md-12"  v-else-if="IntegralHandle.cur_stage ===1">
                                <span>xx经理您好！您当前积分为-10分，产生降级，降级后，接单额及接单量会降低。您已经进入待培训中，培训达标才能接单。积分达到100分将恢复正常！</span>
                                <span></span>
                            </p>
                            <p class="col-md-12" v-else-if="IntegralHandle.cur_stage ===2">
                                <span>xx经理您好！您当前积分为-20分，产生降级，降级后，接单额及接单量会降低。您已经进入待培训中，培训达标才能接单。积分累计达到100分状态将变更为异常。</span>
                                <span></span>
                            </p>
                            <p class="col-md-12" v-else-if="IntegralHandle.cur_stage ===3">
                                <span>xx经理您好！您因累计消分2次，账户已被冻结进入待离职中！</span>
                                <span></span>
                            </p>
                    </div>
            </div>
               <div class="analyItem">
                    <p class="analyItemTit tx-center">综合</p>
                    <div class="analyItemCon" @click="clickFourShow(0)">
                            <p class="col-md-8">
                                <span>积分扣除达0分，满足<font color="red">降级</font>的条件，继续加油！</span>
                            </p>

                    </div>
            </div>
        </div>
           <transition-group class="animated faster" enter-active-class="animated faster slideInRight" leave-active-class="animated faster slideOutRight">
        <!-- 问题 threeresultDetail -->
        <rx-history v-if="fourIndex === 0" :key="0" :basic="basic"></rx-history>
        <rx-trainHistory v-if="fourIndex===1" :key="1" :IntegralHandle = "IntegralHandle"></rx-trainHistory>
           <rx-train v-if="fourIndex===2" :key="2" :IntegralHandle = "IntegralHandle"></rx-train>
         <rx-administrationDetail v-if="fourIndex === 6" :key="0" :orderId="orderId"></rx-administrationDetail>
    </transition-group>
    </div>
</template>
<script>
import { mapGetters } from 'vuex'
import {fingCurStage} from '../../Resources/Api/index'
import rxHistory from './history/demotion'
import rxAdministrationDetail from '../administration/administrationDetail4'
import rxTrainHistory from './newIntegral/trainHistory'
import rxTrain from './newIntegral/train'
export default {
    components: {
        rxHistory,
        rxAdministrationDetail,
        rxTrainHistory,
        rxTrain
    },
    data () {
        return {
            IntegralHandle: {},
            fourIndex: undefined
        }
    },
    created () {
        this.GetCurStage()
    },
    methods: {
        GetCurStage () {
            let _this = this
            _this.IntegralHandle = {}
            fingCurStage({
                uid: _this.leftInfo.uid
            }).then(results => {
                _this.IntegralHandle = results.data.Body
                if (_this.rejectUser == null) {
                    _this.rejectUser = {}
                }
            }).catch(error => {
                console.log(error)
            })
        },
        clickFourShow (index) {
            this.fourIndex = index
        }
    },
    computed: {
        ...mapGetters(['leftInfo'])
    },
    watch: {
        leftInfo () {
            this.GetCurStage()
        }
    }
}

</script>
<style lang="scss">
.issue-div {
    border: 1px solid red;
}
</style>>
